<script setup lang="ts">
import { computed, onMounted, watch } from 'vue'
import { router } from './router'
import axios from './axios'
import Header from './views/layout/Header.vue'
import Aside from './views/layout/Aside.vue'

// 根据路由动态设置标题
watch(router.currentRoute, () => {
    document.title = router.currentRoute.value.meta.title ? '在线申请及审批系统 - ' + router.currentRoute.value.meta.title : '在线申请及审批系统'
    checkLogin()
})


// 判断是否登录, 未登录则跳转到登录页面
const checkLogin = async () => {
    if (!router.currentRoute.value.meta.loginNotRequired) {
        const res = await axios.get('/nav')
        if (!res.data['loggedIn']) {
            // 未登录
            router.push('/login')
        } else if (router.currentRoute.value.path == '/') {
            router.push('/home')
        }
    }
}
const mainClass = computed(() => {
    const r = ['main']
    if (!router.currentRoute.value.meta.aside) {
        r.push('main-without-aside')
    }
    if (!router.currentRoute.value.meta.header) {
        r.push('main-without-header')
    }
    return r.join(' ')
})


</script>
<template>

    <div class="layout">

        <header v-if="router.currentRoute.value.meta.header" class="header">
            <Header />
        </header>
        <div class="bottom">
            <aside v-if="router.currentRoute.value.meta.aside" class="aside">
                <Aside />
            </aside>
            <main :class="mainClass">
                <router-view /> 
            </main>
        </div>

    </div>
</template>

<style scoped>
.layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}
.header {
    display: flex;
    width: 100%;
    height: 64px;
    border-bottom: 1px solid #CDD0D6;
}
.bottom {
    display: flex;
    width: 100%;
    flex: 1;
}
.aside {
    height: 100%;
    width: 211px;
    border-right: 1px solid #CDD0D6;
}
.main {
    flex: 1;
    width: calc(100vw - 211px);
    height: calc(100vh - 64px);
    position: relative;
}
.main-without-aside {
    width: 100vw;
}
.main-without-header {
    height: 100vh;
}
</style>
